<template>
    <div class="bookmark-wrap">
        <!-- 书签 -->
        <a-drawer
                placement="right"
                :closable="false"
                width="600"
                class="bookmark-drawer"
                v-model:visible="drawer.state"
                :after-visible-change="drawerChange"
        >
            <a-row class="bookmark-body" :gutter="20" v-if="store.bookmark.length">
                <a-col :span="6">
                    <ul class="nav-list">
                        <li
                                class="no-select text-elip"
                                :class="nav.idx == index ? 'active' : ''"
                                v-for="(item, index) in store.bookmark"
                                :key="index"
                                @click="navChange(index)"
                                @dblclick="openAllWebsiteByNav(index)"
                        >
                            {{item.title}}
                            <a-tooltip placement="right" v-if="index==0">
                                <template #title>双击打开分类下所有标签,最多10个</template>
                                <QuestionCircleOutlined class="nav-question-icon"/>
                            </a-tooltip>
                        </li>
                    </ul>
                </a-col>
                <a-col :span="18">
                    <a-row :gutter="[10,10]" class="website-list">
                        <a-col :span="12" v-for="(item,index) in bookmark.list" :key="index">
                            <div class="website-item shadow" @click="href(item)">
                                <img class="website-img" :src="item.icon" alt="">
                                <div class="text-elip" :title="item.title">{{item.title}}</div>
                                <span class="website-index">#{{index+1}}</span>
                            </div>
                        </a-col>
                    </a-row>
                </a-col>
            </a-row>
            <div class="text-center" v-else>
                <a-button size="small" @click="goUrl('/manage')">前往添加</a-button>
            </div>
            <template #handle>
                <BookOutlined class="drawer-btn" v-if="!drawer.stateBtn" @mouseenter="drawer.state = true"/>
                <CloseOutlined class="drawer-btn" v-else @click="drawer.state = false"/>
            </template>
        </a-drawer>
    </div>
</template>

<script>
    import {useStore} from "vuex";
    import {openPage, goUrl} from '/src/util/index';

    import {BookOutlined, CloseOutlined, QuestionCircleOutlined} from '@ant-design/icons-vue';

    export default {
        name: "Bookmark",
        // 组件
        components: {
            BookOutlined,
            CloseOutlined,
            QuestionCircleOutlined,
        },
        // 数据
        data() {
            return {
                // vuex 状态
                store: useStore().state,
                // drawer
                drawer: {
                    state: false,
                    stateBtn: false,
                },
                // 分类
                nav: {
                    list: [],
                    idx: 0,
                },
                // 书签
                bookmark: {
                    list: [],
                },
            }
        },
        // DOM未渲染前调用
        created() {
            this.getBookmark();
        },
        // DOM渲染后调用
        mounted() {
        },
        // 方法
        methods: {
            // 书签面板开关
            drawerChange(state) {
                this.drawer.stateBtn = state;
            },
            // 获取数据
            getBookmark(refresh = false) {
                let that = this;
                that.$store.dispatch('getBookmark', refresh).then(list => {
                    console.log('getBookmark', list);
                    if (list.length) {
                        let idx = 0;
                        that.nav.idx = idx;
                        that.bookmark.list = list[idx].website;
                    }
                });
            },
            // 打开分类下所有标签(10个内)
            openAllWebsiteByNav(index = 0) {
                let that = this,
                    list = that.store.bookmark,
                    row = list[index],
                    websiteList = row.website;

                if (websiteList.length < 10 && websiteList.length > 0) {
                    websiteList.forEach(obj => {
                        that.href(obj);
                    })
                } else if (websiteList.length == 0) {
                    that.$message.warning('该分类下无书签');
                } else {
                    that.$message.warning('超过10个书签');
                }
            },
            // navChange
            navChange(index = 0) {
                let that = this,
                    list = that.store.bookmark,
                    row = list[index],
                    websiteList = row.website;
                that.nav.idx = index;
                that.bookmark.list = websiteList;
            },
            // href
            href(obj) {
                this.$store.dispatch('clickBookmark', {
                    uwid: obj.id,
                    wid: obj.wid,
                }).then(res => {
                    openPage(obj.url, 'bookmark');
                })
            },
            // goUrl
            goUrl(url) {
                goUrl(url);
            },
        }
    }
</script>

<style lang="less" scoped>
    .bookmark-drawer {
        .drawer-btn {
            position: absolute;
            top: 300px;
            left: -48px;
            z-index: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            font-size: 18px;
            text-align: center;
            background: #ff5458;
            border-radius: 4px 0 0 4px;
            cursor: pointer;
            pointer-events: auto;
            color: white;
        }
    }

    .bookmark-body {
        .nav-list {
            margin: 0 !important;

            li {
                cursor: pointer;
                padding: 0 5px;
                font-size: 13px;
                height: 30px;
                line-height: 30px;
                transition: all .2s;
                border-left: 2px solid transparent;

                &:first-child {
                    margin: 0;
                }

                &.active, &:hover {
                    border-left: 2px solid #ff5458;
                    color: #ff5458;
                    //font-size: 14px;
                    background-color: #f9f9f9;
                }

                .nav-question-icon {
                    font-size: 10px;
                }
            }
        }

        .website-list {
            .website-item {
                padding: 10px 15px 10px;
                cursor: pointer;
                position: relative;

                &:hover {
                    cursor: pointer;
                    transform: translateY(-2px);
                    -webkit-transform: translateY(-2px);
                    -moz-transform: translateY(-2px);
                }

                img.website-img {
                    position: relative;
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    background-color: white;
                    float: left;
                    margin-right: 10px;

                    &:after {
                        content: '';
                        display: block;
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        z-index: 2;
                        top: 0;
                        left: 0;
                        background: url('/src/assets/imgs/network.png') white;
                        background-size: 100%;
                    }
                }

                .website-index {
                    position: absolute;
                    top: 0;
                    right: 4px;
                    color: #e2e2e2;
                    font-size: 12px;
                    font-weight: bold;
                }
            }
        }
    }
</style>